<template>
  <div class="course-wizard">
    <el-steps :active="activeStep" simple>
      <el-step :icon="Edit" title="基本信息"></el-step>
      <el-step :icon="VideoPlay" title="课程目录"></el-step>
      <!--      <el-step :icon="video-camera" title="课程视频"></el-step>-->
      <el-step :icon="Document" title="课程测验"></el-step>
      <el-step :icon="Avatar" title="课程老师"></el-step>
    </el-steps>
    <div class="steps-content">
      <template v-if="activeStep === 0">
        <el-form ref="courseForm" :model="courseForm" label-width="120px" :rules="rules.course">
          <el-form-item label="所属上级分类" prop="thirdCateId">
            <el-tree-select
                v-model="courseForm.thirdCateId"
                :data="categoryList"
                :props="treeProps"
                filterable
                style="width: 240px"
                @node-click="handleNodeClick"
            />
          </el-form-item>

          <el-form-item label="课程名称" prop="name">
            <el-input v-model="courseForm.name" placeholder="请输入课程名称"></el-input>
          </el-form-item>

          <el-form-item label="课程封面" prop="coverUrl">
            <!--            <el-upload-->
            <!--                class="avatar-uploader"-->
            <!--                action="https://jsonplaceholder.typicode.com/posts/"-->
            <!--                :show-file-list="false"-->
            <!--                :on-success="handleAvatarSuccess"-->
            <!--                :before-upload="beforeAvatarUpload">-->
            <!--              <img v-if="courseForm.coverUrl" :src="courseForm.coverUrl" class="avatar">-->
            <!--              <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
            <!--            </el-upload>-->
            <my-img-upload v-model="courseForm.coverUrl" limit="1"></my-img-upload>
          </el-form-item>

          <el-form-item label="课程类型" prop="courseType">
            <el-radio-group v-model="courseForm.courseType">
              <el-radio value="1">线上课</el-radio>
              <el-radio value="2">线下课</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--          线下课选择上课地点-->
          <el-form-item v-if="courseForm.courseType === '2'" label="上课地点" prop="address">
            <iframe frameborder="0" height="440px" scrolling="no" src="../../../../html/map.html" width="100%"></iframe>
          </el-form-item>


          <el-form-item label="付费/免费" prop="free">
            <el-radio-group v-model="courseForm.free">
              <el-radio value="1" @change="courseForm.price= 0">免费</el-radio>
              <el-radio value="0">付费</el-radio>
            </el-radio-group>
            <div v-if="courseForm.free === '0'" style="padding-left: 20px">
              <el-input v-model="inputPrice" min="0" placeholder="请输入课程价格"
                        style="width: 150px;padding-right: 10px" type="number"></el-input>
              <span>元</span>
            </div>
          </el-form-item>

          <el-form-item label="学习有效期" prop="validDuration">
            <el-radio-group v-model="limitValid">
              <el-radio value="0" @change="courseForm.validDuration= 999">永久</el-radio>
              <el-radio value="1">限时</el-radio>
            </el-radio-group>
            <div v-if="limitValid === '1'" style="padding-left: 20px">
              <el-input v-model="courseForm.validDuration" max="999" min="1" placeholder="请输入月"
                        style="width: 150px;padding-right: 10px" type="number"></el-input>
              <span>月</span>
            </div>
          </el-form-item>

          <el-form-item label="下架时间" prop="purchaseEndTime">
            <el-date-picker v-model="courseForm.purchaseEndTime" placeholder="请选择" type="date"></el-date-picker>
          </el-form-item>

          <el-form-item label="课程简介" prop="courseIntroduce">
            <el-input
                type="textarea"
                v-model="courseForm.courseIntroduce"
                :rows="4"
                placeholder="请输入，最多可添加200字">
            </el-input>
          </el-form-item>

          <el-form-item label="适合人群" prop="usePeople">
            <el-input
                type="textarea"
                v-model="courseForm.usePeople"
                :rows="4"
                placeholder="请输入，最多可添加200字">
            </el-input>
          </el-form-item>

          <el-form-item label="课程详情" prop="courseDetail">
            <el-input
                type="textarea"
                v-model="courseForm.courseDetail"
                :rows="4"
                placeholder="请输入，最多可添加500字">
            </el-input>
          </el-form-item>
          <el-form-item label="课程公告" prop="announcement">
            <el-input
                v-model="courseForm.announcement"
                type="textarea"
                :rows="4"
                placeholder="请输入，最多可添加500字">
            </el-input>
          </el-form-item>
          <el-form-item label="评分标准" prop="gradingCriteria">
            <el-input
                v-model="courseForm.gradingCriteria"
                :rows="4"
                placeholder="请输入，最多可添加500字"
                type="textarea">
            </el-input>
          </el-form-item>
        </el-form>
      </template>

      <template v-if="activeStep === 1">
        <TreeShow :cdata="catalogues" :value="courseForm.id"></TreeShow>

        <!--        <div class="course-chapters">-->
        <!--          <el-form ref="chapterForm" :model="chapterForm" label-width="120px">-->
        <!--            <el-form-item label="新增章节">-->
        <!--              <el-input v-model="chapterForm.newChapterName" placeholder="请输入章节名称"></el-input>-->
        <!--              <el-button type="primary" @click="addChapter">添加章节</el-button>-->
        <!--            </el-form-item>-->
        <!--          </el-form>-->

        <!--          <el-table :data="chapters" style="width: 100%" border>-->
        <!--            <el-table-column prop="id" label="ID" width="50"></el-table-column>-->
        <!--            <el-table-column prop="name" label="章节名称"></el-table-column>-->
        <!--            <el-table-column prop="c_index" label="章排序" width="100"></el-table-column>-->
        <!--            <el-table-column label="操作" width="180">-->
        <!--              <template slot-scope="scope">-->
        <!--                <el-button @click="addSection(scope.$index)">添加小节</el-button>-->
        <!--                <el-button type="danger" @click="removeChapter(scope.$index)">删除本章</el-button>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->

        <!--          <el-table :data="sections" style="width: 100%" border>-->
        <!--            <el-table-column prop="id" label="ID" width="50"></el-table-column>-->
        <!--            <el-table-column prop="name" label="小节名称"></el-table-column>-->
        <!--            <el-table-column prop="c_index" label="排序" width="100"></el-table-column>-->
        <!--            <el-table-column label="操作" width="100">-->
        <!--              <template slot-scope="scope">-->
        <!--                <el-button type="danger" @click="removeSection(scope.$index)">删除小节</el-button>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->
        <!--        </div>-->
      </template>



      <!--      <template v-if="activeStep === 2">-->
      <!--        <div class="course-videos">-->
      <!--          <el-form ref="videoForm" :model="videoForm" label-width="120px">-->
      <!--            <el-form-item label="视频名称">-->
      <!--              <el-input v-model="videoForm.name" placeholder="请输入视频名称"></el-input>-->
      <!--            </el-form-item>-->

      <!--            <el-form-item label="选择视频">-->
      <!--              <el-upload-->
      <!--                  class="upload-video"-->
      <!--                  action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--                  :on-preview="handlePreview"-->
      <!--                  :on-remove="handleRemove"-->
      <!--                  :before-upload="beforeUpload"-->
      <!--                  :file-list="videoForm.fileList">-->
      <!--                <el-button size="small" type="primary">点击上传</el-button>-->
      <!--                <div slot="tip" class="el-upload__tip">支持MP4格式，文件大小不超过500MB</div>-->
      <!--              </el-upload>-->
      <!--            </el-form-item>-->

      <!--            <el-form-item label="视频时长">-->
      <!--              <el-input v-model="videoForm.duration" placeholder="请输入视频时长，如：00:10:00"></el-input>-->
      <!--            </el-form-item>-->

      <!--            <el-form-item label="免费试看">-->
      <!--              <el-switch v-model="videoForm.freePreview"></el-switch>-->
      <!--            </el-form-item>-->

      <!--            <el-table :data="videoForm.videos" style="width: 100%" border>-->
      <!--              <el-table-column prop="chapterName" label="章节名称"></el-table-column>-->
      <!--              <el-table-column prop="videoName" label="视频名称"></el-table-column>-->
      <!--              <el-table-column prop="duration" label="视频时长"></el-table-column>-->
      <!--              <el-table-column prop="freePreview" label="免费试看">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <el-tag v-if="scope.row.freePreview">是</el-tag>-->
      <!--                  <el-tag v-else type="info">否</el-tag>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--              <el-table-column label="操作" width="100">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <el-button  type="danger" @click="removeVideo(scope.row)">删除视频</el-button>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--            </el-table>-->


      <!--          </el-form>-->
      <!--        </div>-->
      <!--      </template>-->


      <template v-if="activeStep === 2">
        <div class="course-quizzes">
          <el-form ref="quizForm" :model="quizForm" label-width="120px">
            <el-form-item label="选择题目">
              <el-button type="primary" @click="selectQuestions">选择题目</el-button>
            </el-form-item>

            <el-table :data="quizForm.questions" style="width: 100%" border>
              <el-table-column prop="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="content" label="题目"></el-table-column>
              <el-table-column prop="score" label="题目分数"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="danger" @click="removeQuestion(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item>
              <el-button type="primary" @click="addQuiz">添加阶段性考试</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>


      <template v-if="activeStep === 3">
        <div class="course-teachers">
          <el-form ref="teacherForm" :model="teacherForm" label-width="120px">
            <el-form-item label="选择老师">
              <el-button type="primary" @click="selectTeachers">选择老师</el-button>
            </el-form-item>

            <el-table :data="teacherForm.teachers" style="width: 100%" border>
              <el-table-column prop="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="name" label="老师名称"></el-table-column>
              <el-table-column label="教师介绍" prop="courseIntroduce"></el-table-column>
              <el-table-column prop="order" label="排序" width="100">
                <template slot-scope="scope">
                  <el-button @click="moveTeacher(scope.$index, -1)">↑</el-button>
                  <el-button @click="moveTeacher(scope.$index, 1)">↓</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="isDisplayed" label="用户端是否显示" width="150">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isDisplayed"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button type="info" @click="hideTeacher(scope.$index)">隐藏</el-button>
                  <el-button type="danger" @click="removeTeacher(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </template>

    </div>
    <div class="bottom">
      <el-button v-if="activeStep>0" @click="prevStep">返回</el-button>
      <el-button type="primary" @click="nextStep">保存并进行下一步</el-button>
      <el-button @click="submitForm">保存并返回</el-button>
      <el-button v-if="activeStep === 3" type="primary" @click="submitForm">完成</el-button>
    </div>
  </div>
</template>

<script>
import {Avatar, Document, Edit, VideoPlay} from "@element-plus/icons-vue";
import MyImgUpload from "@/components/MyImgUpload/index.vue";
import {treeProps} from "element-plus/es/components/tree-v2/src/virtual-tree";
import * as CourseApi from "@/api/course/course.js";
import {addCourse, updateCourse} from "@/api/course/course.js";
import {ElMessage} from "element-plus";
import {listCategory} from "@/api/course/category.js";
import TreeShow from "@/components/TreeShow/index.vue";
import MapDialog from "@/components/BMapAddressSelect/index.vue";
import {listCatalogue} from '@/api/course/catalogue';


;
export default {
  components: {MyImgUpload, TreeShow, MapDialog},
  computed: {
    VideoPlay() {
      return VideoPlay
    },
    Avatar() {
      return Avatar
    },
    treeProps() {
      return treeProps
    },

    Edit() {
      return Edit
    },
    Document() {
      return Document
    },
  },
  watch: {
    inputPrice(newVal) {
      this.courseForm.price = newVal * 100;
    }
  },

  data() {
    return {
      catalogues: [],
      mapDialogRef: null,
      addressInfo: {},
      limitValid: '0',
      inputPrice: 0,
      categoryList: [],
      treeProps: {
        value: 'id', // 数据中的 value 字段
        label: 'name', // 数据中的 label 字段
        children: 'children' // 数据中的 children 字段
      },
      rules: {
        course: {
          name: [
            {required: true, message: "课程名称不能为空", trigger: "blur"}
          ],
          courseType: [
            {required: true, message: "课程类型不能为空", trigger: "change"}
          ],
          coverUrl: [
            {required: true, message: "封面不能为空", trigger: "blur"}
          ],
          thirdCateId: [
            {required: true, message: "课程分类不能为空", trigger: "blur"}
          ],
          free: [
            {required: true, message: "售卖方式不能为空", trigger: "change"}
          ],
          price: [
            {required: true, message: "课程价格不能为空", trigger: "blur"}
          ],
          validDuration: [
            {required: true, message: "课程有效期不能为空", trigger: "blur"}
          ],
          courseIntroduce: [
            {required: true, message: "课程介绍不能为空", trigger: "blur"}
          ],
          usePeople: [
            {required: true, message: "适用人群不能为空", trigger: "blur"}
          ],
          courseDetail: [
            {required: true, message: "课程详情不能为空", trigger: "blur"}
          ],
          announcement: [
            {required: true, message: "课程公告不能为空", trigger: "blur"}
          ],
          gradingCriteria: [
            {required: true, message: "评分标准不能为空", trigger: "blur"}
          ],
          purchaseEndTime: [
            {required: true, message: "购买结束时间不能为空", trigger: "blur"}
          ]
        }
      },
      activeStep: 0,
      courseForm: {
        id: 1,
        insName: "黑马程序员",
        name: "java泛型",
        courseType: "1",
        coverUrl: "https://tse1-mm.cn.bing.net/th/id/OIP-C.uA8ZSear99FtnoPCxGWnjwHaF-?w=213&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
        free: '1',
        price: 0,
        status: 2,
        purchaseStartTime: "2022-08-01",
        purchaseEndTime: "2025-08-04",
        mediaDuration: 0,
        validDuration: 12,
        sectionNum: 10,
        publishTimes: 2,
        publishTime: "2022-11-06",
        courseIntroduce: "1",
        usePeople: "2",
        courseDetail: "3",
        announcement: "4",
        gradingCriteria: "5",
        firstCateId: 1001,
        secondCateId: 2002,
        thirdCateId: 3007,
        step: 2,
        longitude: 108.946,
        latitude: 39.916,
        address: '北京市海淀区'
      },
      videoForm: {
        name: '',
        fileList: [],
        duration: '',
        freePreview: false,
        videos: [
          // 模拟数据，实际应用中应从服务器获取
          {chapterName: '章节名称', videoName: '视频名称', duration: '00:10:00', freePreview: true},
        ],
      },
      chapterForm: {
        newChapterName: '',
        chapters: [
          {index: '01', name: '章节名称', order: '', sections: []},
          {index: '02', name: '章节名称', order: '', sections: []},
          // 模拟数据，实际应用中应从服务器获取
        ],
        sections: [
          {index: '01', name: '小节名称', order: ''},
          {index: '02', name: '小节名称', order: ''},
          // 模拟数据，实际应用中应从服务器获取
        ],
      },
      quizForm: {
        questions: [
          // 模拟数据，实际应用中应从服务器获取
          {index: '01', content: '题目1', score: 8},
          {index: '02', content: '题目2', score: 10},
        ],
      },
      teacherForm: {
        teachers: [
          {index: 1, name: 'XXXXX', courseIntroduce: 'XXXXXXXXXXX', order: 1, isDisplayed: true},
          {index: 2, name: 'XXXXX', courseIntroduce: 'XXXXXXXXXXX', order: 2, isDisplayed: true},
          // 模拟数据，实际应用中应从服务器获取
        ],
      },
      certificateAction: 'https://jsonplaceholder.typicode.com/posts/',
      certificatefileList: [],

    }
  },
  created() {
    listCatalogue(this.courseForm.id).then(res => {
      this.catalogues = res.data
    });
    listCategory({
      status: 1,
      name: undefined
    },).then(response => {
      this.$emit('update-begin');
      if (response && Array.isArray(response.rows) && response.rows.length > 0) {
        this.categoryList = response.rows;
        // ElMessage.success('获取分类列表成功' );
        this.loading = false;
      } else {
        this.categoryList = [];
        ElMessage.warning('没有查询到任何数据');
      }
    }).catch(error => {
      let errorMessage = '获取分类列表失败: 未知错误';
      if (error && error.response && error.response.data) {
        errorMessage = '获取分类列表失败: ' + (error.response.data.message || '无具体错误信息');
        console.error('获取分类列表失败:', error.response.data);
      } else if (error) {
        console.error('请求失败:', error);
        errorMessage = '请求失败: ' + (error.message || '无具体错误信息');
      } else {
        console.error('未知错误');
      }
      ElMessage.error(errorMessage);
    });
    window.addEventListener("message", this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      // 获取从iframe页面中传过来的值
      const params = event.data.params;
      const address = event.data.address;
      console.log(params.lng, params.lat);
      console.log(address);
      this.courseForm.longitude = params.lng;
      this.courseForm.latitude = params.lat;
      this.courseForm.address = address;
    },
    handleNodeClick(node,e) {
      console.log(node, e);
      if (e.level === 3) {
        // 获取父节点（二级分类）
        const parentNode = e.parent;
        console.log('Parent Node (二级分类):', parentNode.data.id); // 打印二级分类id
        this.courseForm.secondCateId = parentNode.data.id;
        // 获取祖父节点（一级分类）
        const grandparentNode = parentNode.parent;
        console.log('Grandparent Node (一级分类):', grandparentNode.data.id); // 打印一级分类id
        this.courseForm.firstCateId = grandparentNode.data.id;
      }
    },

    handleAvatarSuccess(res, file) {
      this.courseForm.coverUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 20MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    addChapter() {
      if (this.chapterForm.newChapterName.trim()) {
        const newChapter = {
          index: String(this.chapterForm.chapters.length + 1),
          name: this.chapterForm.newChapterName,
          order: '',
          sections: []
        };
        this.chapterForm.chapters.push(newChapter);
        this.chapterForm.newChapterName = '';
      } else {
        this.$message.error('章节名称不能为空');
      }
    },
    addSection(index) {
      const newSection = {
        index: String(this.chapterForm.chapters[index].sections.length + 1),
        name: '小节名称',
        order: ''
      };
      this.chapterForm.chapters[index].sections.push(newSection);
    },
    removeChapter(index) {
      this.chapterForm.chapters.splice(index, 1);
    },
    removeSection(index, sectionIndex) {
      this.chapterForm.chapters[index].sections.splice(sectionIndex, 1);
    },
    handlePreview(file) {
      // 处理视频预览
    },
    handleRemove(file, fileList) {
      // 处理视频移除
    },
    beforeUpload(file) {
      // 处理上传前验证
      const isMP4 = file.type === 'video/mp4';
      if (!isMP4) {
        this.$message.error('上传视频只能是 MP4 格式!');
      }
      const isLt500M = file.size / 1024 / 1024 < 500;

      if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500MB!');
      }
      return isMP4 && isLt500M;
    },
    removeVideo(video) {
      // 删除视频的逻辑
      const index = this.videoForm.videos.indexOf(video);
      if (index !== -1) {
        this.videoForm.videos.splice(index, 1);
      }
    },
    selectQuestions() {
      // 选择题目的逻辑
      this.$message.info('选择题目功能待实现');
    },
    addQuiz() {
      // 添加阶段性考试的逻辑
      this.$message.info('添加阶段性考试功能待实现');
    },
    removeQuestion(index) {
      // 删除题目的逻辑
      this.quizForm.questions.splice(index, 1);
    },
    selectTeachers() {
      // 选择老师的逻辑
      this.$message.info('选择老师功能待实现');
    },
    moveTeacher(index, direction) {
      // 移动老师排序的逻辑
      const teachers = this.teacherForm.teachers;
      if (direction === -1 && index > 0) {
        this.swap(teachers, index, index - 1);
      } else if (direction === 1 && index < teachers.length - 1) {
        this.swap(teachers, index, index + 1);
      }
    },
    swap(array, indexA, indexB) {
      const temp = array[indexA];
      array[indexA] = array[indexB];
      array[indexB] = temp;
    },
    hideTeacher(index) {
      // 隐藏老师的逻辑
      this.teacherForm.teachers[index].isDisplayed = false;
    },
    removeTeacher(index) {
      // 删除老师的逻辑
      this.teacherForm.teachers.splice(index, 1);
    },
    certificateBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20
      if (!isRightSize) {
        this.$message.error('文件大小超过 20MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    nextStep() {
      if (this.activeStep === 0) {
        this.$refs["courseForm"].validate(valid => {
          if (valid) {
            if (this.courseForm.id !== 0) {
              CourseApi.updateCourse(this.courseForm).then(res => {
                this.courseForm.id = res.data;
                console.log('提交课程信息', this.courseForm.id);
                this.$modal.msgSuccess("修改成功");
              });
            } else {
              CourseApi.addCourse(this.courseForm).then(res => {
                this.courseForm.id = res.data;
                this.$message.success("保存成功");
              });
            }
          }
        });
        // CourseApi.addCourse(this.courseForm).then((res) => {
        //   this.courseForm.id = res.data;
        //   console.log('提交课程信息', this.courseForm);
        //   this.$modal.msgSuccess("课程信息保存成功");
        // });

      }
      if (this.activeStep < 3) {
        this.activeStep++;
      }



    },
    submitForm() {
      this.$refs["courseForm"].validate(valid => {
        if (valid) {
          if (this.courseForm.id !== "" || this.courseForm.id !== "0") {
            updateCourse(this.courseForm).then(res => {
              this.courseForm.id = res.data;
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addCourse(this.courseForm).then(res => {
              this.courseForm.id = res.data;
              this.$message.success("保存成功");
            });
          }
        }
      });
      // console.log('提交课程信息', this.courseForm);
      // this.$message.success('课程信息提交成功');
      // console.log('提交课程目录信息', this.chapterForm);
      // this.$message.success('课程目录信息提交成功');
      // console.log('提交课程视频信息', this.videoForm);
      // this.$message.success('课程视频信息提交成功');
      // console.log('提交课程测验信息', this.quizForm);
      // this.$message.success('课程测验信息提交成功');
      // console.log('提交课程老师信息', this.teacherForm);
      // this.$message.success('课程老师信息提交成功');
      // console.log('提交课程证书信息', this.certificateForm);
      // this.$message.success('课程证书信息提交成功');
    },
  },

};
</script>

<style scoped>

.course-wizard {
  max-width: 1500px;
  margin: 20px auto;
}

.steps-content {
//margin-top: 20px; width: 1000px; margin: 20px auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.course-chapters {
  max-width: 800px;
  margin: 20px auto;
}

.operation-buttons {
  margin-top: 20px;
  text-align: right;
}

course-videos {
  max-width: 800px;
  margin: 20px auto;
}

.operation-buttons {
  margin-top: 20px;
  text-align: right;
}

.upload-video {
  margin-bottom: 20px;
}

.course-quizzes {
  max-width: 800px;
  margin: 20px auto;
}

.operation-buttons {
  margin-top: 20px;
  text-align: right;
}

.course-teachers {
  max-width: 800px;
  margin: 20px auto;
}

.operation-buttons {
  margin-top: 20px;
  text-align: right;
}

.course-certificate {
  max-width: 600px;
  margin: 20px auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.operation-buttons {
  margin-top: 20px;
  text-align: right;
}

.el-upload__tip {
  line-height: 1.2;
}

.bottom {
  margin-bottom: 20px;
  text-align: center;
}
</style>
